
.chat_header {
  .am-navbar-right{
    img{
      width: 0.49rem;
      height: 0.11rem;
    }
  }
}

.chat_header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
}

@mixin itemCommon ($pos) {
  float: $pos;
  font-size: 0.43rem;
  margin-top: 0.46rem;
}

@mixin msgComon ($pos) {
  float: $pos;
  width: 6.69rem;
  box-sizing: border-box;
  position: relative;

}

@mixin imgCommon ($pos) {
  float: $pos;

  height: 1.11rem;
  width: 1.11rem;
  border-radius: 50%;
  margin: 0 0.30rem
}

@mixin spanCommon ($bgColor) {
  border-radius: 0.1rem;
  display: inline-block;
  padding: 0.39rem 0.38rem;
  background-color: $bgColor;
}

@mixin smallAgle ($bgColor, $x) {
  border: 0.12rem solid $bgColor;
  position: absolute;
  transform: translateX($x) translateY(191%) rotateZ(45deg);

}

// 内容区域
.news_chat_content {
  background-color: white;
  padding-top: 0.51rem;

  &_chatdetail {
    &_time{
      font-size: 0.36rem;
      color: #333333;
      text-align: center;
    }
    &_itemfr {
      @include itemCommon(left);

      img {
        @include imgCommon(left);
      }

      &_msg {
        @include msgComon(right);
        

        span {
          @include spanCommon(#dddddd);
        }
        .smallAngle {
          @include smallAgle(#dddddd, -50%);
          left:0;
          // border-right-color: transparent;
          // border-top-color: transparent;
        }
      }
    }

    &_itemmy {
      @include itemCommon(right);

      img {
        @include imgCommon(right);
      }

      &_msg {
        @include msgComon(left);

        span {
          @include spanCommon(rgba(39, 186, 194, 0.5));
        }

        .smallAngle {
          @include smallAgle(rgba(39, 186, 194, 0.5), -51%);
          border-left-color: transparent;
          border-bottom-color: transparent;
        }
      }
    }
  }
}

// 底部
.news_chat_footer{
  height: 1.51rem;
  .am-navbar-light{
    background-color: #E4E4E4;
    height: 100%;
  }
  &_input{
    height: 1.08rem;
    width: 7.65rem;
    border-radius: 1rem;
    padding-right: 0.8rem;
    box-sizing: border-box;
    border: none;
    outline: none;
    text-indent: 0.3rem;
    font-size: 0.35rem;
    caret-color:rgb(32, 155, 161);
  }
  .voice_btn{
    background-color: #ffffff;
    color: #666666;
    font-size: 0.35rem; 
  }
  &_expression{
    // transform: translateX(-120%);
    position: absolute;
    right: 1.38rem;
    width: 0.7rem;
  }
  .am-navbar-left{
    padding-left: 0.25rem;
    img{
      width: 0.73rem;
      height: 0.73rem;
    }
  }
  .am-navbar-right{
    margin-right:  0.18rem;
    img{
      width: 0.7rem;
      height: 0.7rem;
    }
  }

}